<template>
  <div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto">
      <a-card title="CSS 美化工具" class="mb-4">
        <div class="space-y-6">
          <!-- 输入区域 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              输入 CSS 代码：
            </label>
            <a-textarea
              v-model:value="inputCss"
              :rows="10"
              placeholder="请输入需要美化的 CSS 代码..."
              @change="beautify"
            />
          </div>

          <!-- 选项设置 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                缩进方式
              </label>
              <a-radio-group v-model:value="indentType" @change="beautify">
                <a-radio value="space">空格</a-radio>
                <a-radio value="tab">Tab</a-radio>
              </a-radio-group>
            </div>
            <div v-if="indentType === 'space'">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                空格数量
              </label>
              <a-input-number
                v-model:value="indentSize"
                :min="1"
                :max="8"
                @change="beautify"
              />
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="flex space-x-2">
            <a-button type="primary" @click="beautify">
              美化代码
            </a-button>
            <a-button @click="minify">
              压缩代码
            </a-button>
            <a-button @click="copyResult">
              复制结果
            </a-button>
            <a-button @click="clearAll">
              清空
            </a-button>
          </div>

          <!-- 输出区域 -->
          <div v-if="outputCss">
            <label class="block text-sm font-medium text-gray-700 mb-2">
              美化后的代码：
            </label>
            <div class="relative">
              <a-textarea
                v-model:value="outputCss"
                :rows="10"
                readonly
              />
              <div class="absolute top-2 right-2">
                <a-button
                  type="text"
                  @click="copyResult"
                >
                  <template #icon><copy-outlined /></template>
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 使用说明 -->
      <a-card title="使用说明" class="mb-4">
        <ol class="list-decimal list-inside space-y-2 text-gray-600">
          <li>粘贴需要美化的 CSS 代码到输入框</li>
          <li>选择缩进方式（空格或Tab）和空格数量</li>
          <li>点击"美化代码"按钮进行格式化</li>
          <li>点击"压缩代码"可以生成压缩版本</li>
          <li>点击复制按钮可以复制结果到剪贴板</li>
        </ol>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { CopyOutlined } from '@ant-design/icons-vue'

// 状态
const inputCss = ref('')
const outputCss = ref('')
const indentType = ref('space')
const indentSize = ref(2)

// 美化CSS
const beautify = () => {
  if (!inputCss.value) return

  try {
    // 1. 移除多余空白和注释
    let css = inputCss.value
      .trim()
      .replace(/\/\*[\s\S]*?\*\//g, '') // 移除注释
      .replace(/([^{}])\s+/g, '$1 ') // 合并空白
      .replace(/\s*{\s*/g, ' {') // 处理左大括号
      .replace(/\s*}\s*/g, '}') // 处理右大括号
      .replace(/\s*;\s*/g, ';') // 处理分号
      .replace(/\s*:\s*/g, ': ') // 处理冒号

    // 2. 分割规则
    const rules = css.split('}')

    // 3. 格式化每条规则
    const indent = indentType.value === 'space' 
      ? ' '.repeat(indentSize.value)
      : '\t'

    const formatted = rules
      .filter(rule => rule.trim())
      .map(rule => {
        // 处理选择器和属性
        const [selector, ...properties] = rule.split('{')
        if (!properties.length) return ''

        // 格式化属性
        const props = properties[0]
          .split(';')
          .filter(prop => prop.trim())
          .map(prop => `${indent}${prop.trim()};`)
          .join('\n')

        return `${selector.trim()} {\n${props}\n}`
      })
      .join('\n\n')

    outputCss.value = formatted
  } catch (error) {
    message.error('CSS 格式化失败')
  }
}

// 压缩CSS
const minify = () => {
  if (!inputCss.value) return

  try {
    const minified = inputCss.value
      .replace(/\/\*[\s\S]*?\*\//g, '')
      .replace(/\s+/g, ' ')
      .replace(/\s*{\s*/g, '{')
      .replace(/\s*}\s*/g, '}')
      .replace(/\s*;\s*/g, ';')
      .replace(/\s*:\s*/g, ':')
      .trim()

    outputCss.value = minified
  } catch (error) {
    message.error('CSS 压缩失败')
  }
}

// 复制结果
const copyResult = async () => {
  if (!outputCss.value) {
    message.warning('没有可复制的内容')
    return
  }

  try {
    await navigator.clipboard.writeText(outputCss.value)
    message.success('已复制到剪贴板')
  } catch {
    message.error('复制失败')
  }
}

// 清空所有
const clearAll = () => {
  inputCss.value = ''
  outputCss.value = ''
}
</script> 